<template>
	<view class="body" ref="scroll" v-if="deoList[0]">
		<image class="imal" :src="deoList[0].image" mode="aspectFill"></image>
		<view class="list-nr-hez">
			<view class="wenz-bt">{{ deoList[0].title }}</view>
			<view class="wenz-nr">
				<!-- <rich-text class="wenz-nr-text" :nodes="deoList[0].content" @itemclick="perview"></rich-text> -->
				<u-parse :html="deoList[0].content" class="wenz-nr-text" :selectable="true" :show-with-animation="true"></u-parse>
			</view>
			<view class="wenz-dag">课程大纲</view>
			<view class="sp-xian"></view>
			<view class="dibu-list" v-for="(item, indexo) in list" :key="indexo" @click="shipi(item ,indexo)">
				<view class="list-1">
					<view class="list-bt">
						<view style="display: flex;">
							<text class="text-1" :class=" item.id == deoList[0].id ? 'text-5' : '' " v-if="item.type == 1">视频</text>
							<text class="text-1" :class=" item.id == deoList[0].id ? 'text-5' : ''" v-if="item.type == 3">文章</text>
							<!-- 视频的标题文字 -->
							<view class="text-2" :class="item.id == deoList[0].id ? 'chengsezit' : '' " v-if="item.type == 1">
								{{ item.title }}
							</view>
							<!-- 文章的标题文字 -->
							<view class="text-2 text-3" :class="item.id == deoList[0].id ? 'chengsezit' : '' "
								v-if="item.type == 3">
								{{ item.title }}
							</view>
							<view class="list-sj" v-else-if="item.type == 1">
								<u-icon name="clock"></u-icon>
								<text>{{ item.time }}</text>
							</view>
							
							<view class="list-2">
								<view v-if="item.is_pay || item.price == 0">
									<view v-if="item.type == 1">
										<image src="/static/img/Home/zanting.png" v-if=" item.id == deoList[0].id ? true : false"></image>
										<image src="/static/img/Home/zanting1.png" v-else></image>
									</view>
									<view v-if="item.type == 3">
										<image src="/static/img/Home/sousuo.png" v-if=" item.id == deoList[0].id ? true : false"></image>
										<image src="/static/img/Home/sousou1.png" v-else></image>
									</view>
								</view>
								<view v-else>
									<view >
										<view v-if="item.type == 1">
											<image src="/static/img/Home/zanting.png" v-if=" item.id == deoList[0].id ? true : false"></image>
											<image src="/static/img/Home/zanting1.png" v-else></image>
										</view>
										<view v-if="item.type == 3">
											<image src="/static/img/Home/sousuo.png" v-if=" item.id == deoList[0].id ? true : false"></image>
											<image src="/static/img/Home/sousou1.png" v-else></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		<view style="height: 300rpx;"></view>
	</view>
</template>

<script>
	import { apiGetVideoDetails } from "@/api/school.js"
	export default {
		data() {
			return {
				indexopp: 0,
				indexop: 0,
				list: [],
				current: {},
				isLoading: false,
				goods_id: 0,
				scrollTop: 0,
				iocs:{},
				courseInfo: {},
				deoList:{},
				ids:null,
				onHoie:false
			}
		},
		onPageScroll(e) {
			this.iocs = e.scrollTop;
			this.scrollTop = e.scrollTop;
		},
		// 监听页面显示的时候调用接口，重新获取数据
		onShow(){
			
		},
		onLoad(option) {
			this.ids = option.ids
			if(!option.id) {
				this.app.showToast('课程参数有误', '/pages/school/school');
			} else {
				this.id = option.id;
				this.getCourseList(option.id)
			}
			
			
			// document.documentElement.scrollTop = 0;
		},
		
		onHide() {
			uni.pageScrollTo({
				scrollTop:0,
				 duration: 0 
			})
		},
		mounted() {
			
		},

		methods: {
			// 点击图片预览
			perview(e){
				console.log(this.current);
				return
				this.content = this.data.info.info.match(/<img[^>]+>/g);
				var arrImg = []
				for(var j=0;j<this.content.length;j++){
					this.content[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
						arrImg.push(capture)
					})
				}
				this.arrImgList = arrImg
				uni.previewImage({
					current:this.arrImgList.length,
					urls:this.arrImgList,
				})
			},
			ppol(){
				this.iocs = 0
			},
			shipi(item, indexo) {
				uni.setStorageSync('SchoolList',item)
				if(item.id === this.deoList[0].id){
					return
				}
				let url
				if(item.type == 3){
					url = '/pagesSchool/pages/essay?id=' + item.course_id;
				}else{
					url = '/pagesSchool/pages/frequency?id=' + item.course_id;
				}
				uni.redirectTo({
					url: url
				})
				
			},
			async getCourseList(id) {
				
				await apiGetVideoDetails({
					id
				}).then(res => {
					console.log(res);
					const vidoList = uni.getStorageSync('SchoolList')
					let arr = []
					arr = res.shop_course_item
					this.deoList = arr.filter(item=> item.id === vidoList.id )
					this.list = res.shop_course_item
					
				})
				
			},
			buyBtn() {
				if (this.isLoading == true) {
					return false;
				}

				let data = {};
				data.goods_id = this.goods_id
				data.sku_id = 0;
				data.number = 1;
				data.type = 'onbuy'
				data.prom_type = 0;
				data.prom_id = 0;
				data.buy_notice = 1;
				this.isLoading = true;

				this.$u.post('shop/api.flow/addCart', data).then(res => {
					this.isLoading = false;

					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
						return false;
					} else {
						this.gotoPage('/pages/shop/flow/checkOut?recids=' + res.data.rec_id);
					}
				}).catch(res => {
					this.isLoading = false;
				})
			},
            gotoPage(url) {
                uni.navigateTo({
                    url: url
                })
            }
		}
	}
</script>

<style lang="scss">
	.dibut {
			width: 750rpx;
			height: 162rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
			display: flex;
			justify-content: center;
			align-items: center;
			view {
				width: 691rpx;
				height: 75rpx;
				background: #F76E00;
				border-radius: 38rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 75rpx;
				text-align: center;
			}
		}
	.body {
		width: 100%;
		height: 100%;
	}

	.text-5 {
		background-color: #F76E00 !important;
		color: #fff !important;
	}

	.chengsezit {
		color: #F76E00 !important;
	}

	.imal {
		width: 750rpx;
		height: 423rpx;
	}

	.list-nr-hez {
		width: 687rpx;
		// height: 100%;
		margin: 0 auto;
		background-color: #fff;
		padding-top: 49rpx;
		margin-top: 20rpx;
		padding-bottom: 10rpx;

		.wenz-bt {
			margin-left: 43rpx;
			font-weight: 600;
			font-size: 29rpx;
			color: #626262;
			margin-bottom: 29rpx;
		}

		.wenz-nr {
			width: 611rpx;
			margin: 0 auto;
			margin-bottom: 58rpx;
			font-weight: 300;
			font-size: 23rpx;
			color: #666666;
			.wenz-nr-text{
				width: 611rpx;
			}
			img{
				max-width: 100% !important;
			}
		}

		.wenz-dag {
			margin-left: 42rpx;
			height: 40rpx;
			border-left: 6rpx solid #F76E00;
			padding-left: 8rpx;
			margin-bottom: 30rpx;
			line-height: 40rpx;
		}

		.sp-xian {
			width: 615rpx;
			border: 1px solid #d5d3d3;
			margin: 0 auto;
			margin-top: 38rpx;
		}

		.dibu-list {
			display: flex;
			// justify-content: center;
			align-items: center;
			width: 614rpx;
			height: 61rpx;
			margin: 0 auto;
			background: #F5F5F5;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			margin-top: 30rpx;

			.list-1 {
				width: 611rpx;
				height: 61rpx;
				margin-right: 10rpx;
				position: relative;

				.list-bt {
					font-weight: bold;
					display: inline-block;

					.text-1 {
						width: 40rpx;
						height: 30rpx !important;
						line-height: 30rpx;
						background: #838383;
						border-radius: 4rpx;
						font-weight: 400;
						font-size: 16rpx;
						color: #FFFFFF;
						text-align: center;
						margin-left: 11rpx;
						margin-top: 18rpx;
					}

					.text-2 {
						width: 375rpx;
						line-height: 61rpx;
						font-weight: bold;
						font-size: 30rpx;
						word-break: keep-all;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: 8rpx;
						color: #838383;
						font-weight: 300;
						font-size: 24rpx;
					}

					.text-3 {
						width: 404rpx;
					}
				}

				.list-sj {
					display: inline-block;
					margin-top: 6rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					height: 100%;
					line-height: 55rpx;
					// margin-left: -10rpx;

					text {
						margin-left: 6rpx;
					}
				}
			}

			.list-2 {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translate(-50%, -50%);

				image {
					width: 27rpx;
					height: 27rpx;

				}
			}
		}
	}

	.dibut {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			width: 691rpx;
			height: 75rpx;
			background: #F76E00;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 75rpx;
		}
	}
</style>